<script setup lang="ts">
  import { Ref } from 'vue';
  import { useRoute } from 'vue-router';
  import { regionType } from '../index';
  import { dataTree } from './index';
  const emit = defineEmits<Emits>();
  interface Emits {
    (e: 'update:namevalue', val: number): void;
    (e: 'update:show', val: boolean, title: string): void;
    (e: 'updateRight:show', val: boolean): void;
  }
  const Route = useRoute();
  const routerValue = ref<string>();
  const containerTree = ref<HTMLElement | null>(null);
  const selectArrow = ref<any>(null);
  const regionData = ref<Array<Namespace.commandType>>([]);
  const UnitData = ref<regionType>({
    region: '',
    Unit: '',
  });
  const props = defineProps({
    data: {
      type: Array<Namespace.commandType>,
    },

    treeList: {
      type: Array<Namespace.unitTree>,
    },
    regionCode: {
      type: Number,
    },
    rightShow: {
      type: Boolean,
    },
    // eslint-disable-next-line vue/prop-name-casing
    UnitList: {
      type: Array<{ label: string; value: number }>,
    },
    selected: {
      type: Number,
    },
  });
  watch(
    props,
    async (value: any) => {
      if (value.data) {
        regionData.value = value.data.map((it) => {
          return {
            value: it.value as number,
            label: it.name as string,
          };
        });
      }
      if (value.regionCode) {
        UnitData.value.region = value.regionCode;
      }
    },
    {
      deep: true,
    },
  );

  onMounted(async () => {
    switch (Route.name) {
      case 'commandPages':
        routerValue.value = '权限控制';
        break;
      default:
        break;
    }
  });

  // const addMenu = () => {
  //   emit('update:show', true, '新增权限点');
  // };
  const handleSelectChange = (value: number) => {
    if (value) emit('updateRight:show', false);
    emit('update:namevalue', value);
  };
  const change = (item: any) => {
    if (!item) {
      UnitData.value.Unit = '';
    }
  };
  const container = inject<Ref<HTMLElement | null>>('container');
  const hanldeLeftWidth = async () => {
    let width = '300px';
    let padding = '20px';
    let borderTop = '4px solid var(--el-menu-border-color)';
    let borderRight = '1px solid var(--el-menu-border-color)';
    if (container!.value?.style.width == '0px') {
      if (container && container.value) {
        selectArrow.value.style.transform = 'translate(-50%, -50%) rotate(0deg)';
        selectArrow.value.style.left = '20%';
        container.value.style.width = width;
        // containerTree.value!.style.width = width; // 隐藏树形
        containerTree.value!.style.padding = padding;
        containerTree.value!.style.borderTop = borderTop;
        containerTree.value!.style.borderRight = borderRight;
      }
    } else {
      if (container && container.value) {
        selectArrow.value.style.transform = 'translate(-50%, -50%) rotate(180deg)';
        selectArrow.value.style.left = '57%';
        container.value.style.width = '0';
        // containerTree.value!.style.width = '0';  // 隐藏树形
        containerTree.value!.style.padding = '0';
        containerTree.value!.style.borderTop = 'none';
        containerTree.value!.style.borderRight = 'none';
      }
    }
  };
</script>

<template>
  <div class="containerCom">
    <div class="select-content" ref="containerTree">
      <span class="title">{{ routerValue }}</span>
      <ElForm :model="UnitData">
        <ElSelectV2
          filterable
          v-model="UnitData.region"
          :options="regionData"
          class="selecTerm"
          placeholder="请选择"
          size="large"
          @change="handleSelectChange"
        />
        <ElSelectV2
          filterable
          v-model="UnitData.Unit"
          :options="UnitList"
          style="width: 100%"
          placeholder="请选择单元"
          clearable
          @change="change"
          size="large"
        />
        <!-- <ElButton class="queryButton" type="primary" @click="Clickquery">查询</ElButton> -->
      </ElForm>
      <!-- <ElButton type="primary" @click="addMenu" class="Addmenu">新增权限点</ElButton> -->
      <ElementComTree
        :data="props.treeList"
        :id="UnitData.Unit"
        :dataTree="dataTree"
        :selected="props.selected"
        :icons="false"
        :menuShow="true"
      />
    </div>
    <div class="select-left-arrow" @click="hanldeLeftWidth">
      <span ref="selectArrow"></span>
    </div>
  </div>
</template>

<style lang="scss" scoped>
  .containerCom {
    height: $height;
    position: relative;
    .select-content {
      padding: 20px;
      box-sizing: border-box;
      border-top: 4px solid var(--el-menu-border-color);
      border-right: 1px solid var(--el-menu-border-color);
      height: $height;
      // display: grid;
      // grid-template-rows: 0.8fr 2.8fr 21fr;
      position: relative;
      overflow: hidden;
      .title {
        display: flex;
        margin-bottom: 5px;
      }
      .queryButton {
        width: $width - 75;
      }
      .selecTerm {
        width: $width;
      }
      .Addmenu {
        margin-top: 8px;
        width: $width;
      }
    }
    .select-left-arrow {
      position: absolute;
      width: 16px;
      height: 50px;
      top: 50%;
      right: -15px;
      -webkit-transform: translateY(-50%);
      transform: translateY(-50%);
      background-color: transparent;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      z-index: 999;
      cursor: pointer;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      span {
        display: block;
        position: absolute;
        width: 0;
        height: 0;
        border-width: 5px;
        border-color: transparent;
        border-right-color: var(--el-menu-border-color);
        border-style: solid;
        left: 20%;
        top: 50%;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-transform: translate(-50%, -50%) rotate(0deg);
        transform: translate(-50%, -50%) rotate(0deg);
      }
    }
    .select-left-arrow::before {
      content: '';
      position: absolute;
      border-radius: 0 10px 10px 0;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      border-left: 0;
      border-color: var(--el-menu-border-color);
      border-style: solid;
      top: 0;
      right: 0;
      bottom: 0;
      left: 1px;
      background: var(--el-fill-color-blank);
      z-index: -1;
      -webkit-transform: perspective(50px) rotateY(30deg);
      transform: perspective(50px) rotateY(30deg);
      -webkit-transition: all 0.15s;
      transition: all 0.15s;
    }
  }
</style>
